<template>
<HerinContainer class="MainCoal-box" :delay="1" title="40204综采面工作进度">
    <!-- 左1上区域 -->
<template #content>
  <div class="MainCoal-box-content">
      <navCard :nav-card-list="navCardList"  @changeNav="changeNav" style="margin-bottom: .625rem;"/>

      <div class="content-item-box">
        <div class="content-item" style="padding-bottom: 0 ;">
          <div class="top-left">
            <span class="top-left-span">今日推进</span>
            <div>
              <span class="top-right-num-v2">4</span>
              <span class="company" style="margin-right:2.5rem;">米</span>
            </div>
          </div>
          <div class="top-left">
            <span class="top-left-span">累计推进</span>
            <div>
              <span class="top-right-num-v2">1298</span>
              <span class="company">米</span>
            </div>
          </div>
        </div>
        <div class="content-item" style="padding-top: 0.625rem;">
          <span class="company">{{40204}}综采面设计巷道宽度为220米</span>
        </div>
      </div>

      <!-- 图表分析 -->
      <div class="anaiyse-person">
        <div class="anaiyse-person1">
          <div class="anaiyse-barchart">
            <div>
              <div>近7天原煤产量统计</div>
            </div>
            <!-- 柱状图区域 -->
            <div class="anaiyse-chert">
              <MouldBoxV3
                :datas="data"
                :text ="['hh']"
                class="mouldbox-v3"
                :chartOption="{
                  color:['#1B74D2'],
                  area: false,
                  unit: '吨'
                }"
              />
            </div>
          </div>
          <!-- 折线图区域 -->
          <div class="anaiyse-linechart">
            <div>
            <div>近30天原煤产量统计</div>
            </div>
            <div class="anaiyse-linechert">
              <LineChart
              :chartData="chartData"
              :text="['万吨']"
              :area="false"
              unit="吨"
              :color="['#33C6FD']"
            />
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
</HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import navCard from '../common/navCard.vue';
// import BarChart from '@/components/chart/bar/BarChart.vue';
import LineChart from '@/components/chart/line/LineChart.vue';
import MouldBoxV3 from '../common/MouldBoxV3.vue';
// import { pumpMapList } from '../../excavation/common/titles';

export default {

  components: {
    HerinContainer,
    // BarChart,
    MouldBoxV3,
    LineChart,
    navCard
  },
  data() {
    return {
      chartOption: {
        color: ['#00F9FC'],
        area: false,
        unit: '米'
      },
      data: [
        { x: '12-01', y: 75, s: '进尺' },
        { x: '12-06', y: 30, s: '进尺' },
        { x: '12-11', y: 60, s: '进尺' },
        { x: '12-16', y: 37, s: '进尺' },
        { x: '12-21', y: 79, s: '进尺' },
        { x: '12-26', y: 42, s: '进尺' },
        { x: '12-31', y: 67, s: '进尺' }
      ],
      chartData: [
        { x: '12-5', y: 10153, s: '产量' },
        { x: '12-10', y: 12394, s: '产量' },
        { x: '12-15', y: 15345, s: '产量' },
        { x: '12-20', y: 13457, s: '产量' },
        { x: '12-25', y: 11098, s: '产量' },
        { x: '12-30', y: 10989, s: '产量' }
      ],
      pumpMapList: []
    };
  },
  computed: {
    navCardList() {
      const todayOutput = this.$store.state.dispath.dispathData.underRate;
      const monthOutput = this.$store.state.dispath.dispathData.monthTotalOutput;
      return [
        { navTitle: '今日产量', num: todayOutput, navIcon: require('@/assets/img/dispath/output.png'), unit: '吨' },
        { navTitle: '当月产量', num: monthOutput, navIcon: require('@/assets/img/dispath/output.png'), unit: '吨' }
      ];
    }
  //   titles() {
  //     let title = '';
  //     const id = this.$route.params.id;
  //     if (this.pumpMapList && this.pumpMapList.length > 0) {
  //       title = this.pumpMapList.find(item => id === item.id).value;
  //     }
  //     return title + '进尺分析';
  //   }
  },
  mounted() {
    // this.pumpMapList = pumpMapList;
  },
  methods: {
    changeNav(data) {
      console.log(data);
    }
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box{
  margin-bottom: .625rem;
  &-content{
    .company{
      color: #838383;
      font-size: .75rem;
    }
    .content-item-box{
      width:20rem;
      border-radius: .625rem;
      margin-bottom: .9375rem;
      .content-item{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #1D2E45;
        padding: .9375rem;
        box-sizing: border-box;
        .top-left{
          display: flex;
          align-items: center;
          justify-content: space-around;
          width: 50%;
        }
        .top-left-span{
          font-size: .875rem;
          color: #F8F8F8;
          vertical-align:middle;
        }
        .top-right-num-v2{
          color: #00FDFF;
          font-size: 1rem;
          margin-right: .625rem;
        }
      }
    }

    .anaiyse-person{
      .anaiyse-person1{
        margin-top: 10px;
        font-size: 12px;
        color: #ADADAD;
        .anaiyse-linechart{
          .anaiyse-linechert{
            height: 10rem;
          }
        }
      }
      .buttonbox{
        display: flex;
        align-items: center;
        div{
          font-size: .75rem;
          color: rgba(255, 255, 255, 100);
          margin:0 5px;
          width: 48px;
          text-align: center;
          height: 18px;
          line-height: 18px;
          background: rgba(232, 232, 232, 0.2);
        }
        .active{
          color: #02E4FF;
          background-color: rgba(2, 228, 255, 0.2);
        }
      }
    }
  }
}
</style>
